@extends('Admin.Layouts.layout')
@section('title','后台管理系统')
@section('head')
@endsection
@section('style')
    <style>
        .admin-content-list {
            border: 1px solid #e9ecf1;
            margin-top: 0;
        }
        .admin-content-list li:first-child {
             border-left: none;
         }
        .admin-content-list li {
            border: 1px solid #e9ecf1;
            border-width: 0 1px;
            margin-left: -1px;
        }
        .admin-content-list li:last-child {
            border-right: none;
        }

    </style>
@endsection
@section('content')
    <div class="lyl-content">
        <div class="am-cf admin-main2">
            <div class="admin-content">
                <div class="admin-content-body">

                    <div class="am-cf am-padding">
                        <ol class="am-breadcrumb">
                            <li><a href="{{ url("admin/center/pv") }}" class="am-icon-home">首页</a></li>
                            <li class="am-active">{{ $key=='pv'?'PV':'UV' }}</li>

                            <div class="am-fr am-cr">
                                <a class="am-btn am-btn-warning am-btn-xs" href="javascript:location.replace(location.href);">
                                    <i class="am-icon-refresh"></i>
                                </a>
                            </div>
                        </ol>
                    </div>


                    <div class="am-g am-animation-slide-right" v-if="list.data.length==0">
                        <div class="am-u-sm-12">
                            <ul class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list" style="font-size:1.6rem;">
                                <li><a href="#" class="am-text-success"><span class="am-icon-btn am-icon-file-text"></span><br/>今日PV<br/>{{ $count['pvone'] }}</a></li>
                                <li><a href="#" class="am-text-warning"><span class="am-icon-btn am-icon-briefcase"></span><br/>累计PV<br/>{{ $count['pvall'] }}</a></li>
                                <li><a href="#" class="am-text-danger"><span class="am-icon-btn am-icon-recycle"></span><br/>今日UV<br/>{{ $count['uvone'] }}</a></li>
                                <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-user-md"></span><br/>累计UV<br/>{{ $count['uvall'] }}</a></li>
                            </ul>
                        </div>
                        <div class="am-u-sm-12">
                            <a type="button" class="am-btn am-btn-secondary" href="{{ url("admin/center/".($key=='uv'?'pv':'uv')) }}">查看 <span class="am-icon-hand-o-right"></span> {{ $key=='uv'?'PV':'UV' }}</a>
                        </div>
                        <div class="am-u-sm-12">
                            <div class="am-alert am-alert-success" data-am-alert>
                                <button type="button" class="am-close">&times;</button>
                                <p>对不起，还没有内容！</p>
                            </div>
                        </div>

                    </div>

                    <div class="am-g am-animation-slide-right" v-else>
                        <div class="am-u-sm-12">
                            <ul class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list" style="font-size:1.6rem;">
                                <li><a href="#" class="am-text-success"><span class="am-icon-btn am-icon-file-text"></span><br/>今日PV<br/>{{ $count['pvone'] }}</a></li>
                                <li><a href="#" class="am-text-warning"><span class="am-icon-btn am-icon-briefcase"></span><br/>累计PV<br/>{{ $count['pvall'] }}</a></li>
                                <li><a href="#" class="am-text-danger"><span class="am-icon-btn am-icon-recycle"></span><br/>今日UV<br/>{{ $count['uvone'] }}</a></li>
                                <li><a href="#" class="am-text-secondary"><span class="am-icon-btn am-icon-user-md"></span><br/>累计UV<br/>{{ $count['uvall'] }}</a></li>
                            </ul>
                        </div>
                        <div class="am-u-sm-12">
                            <a type="button" class="am-btn am-btn-secondary am-fl" href="{{ url("admin/center/".($key=='uv'?'pv':'uv')) }}">查看 <span class="am-icon-hand-o-right"></span> {{ $key=='uv'?'PV':'UV' }}</a>
                        </div>
                        <div class="am-u-sm-12">
                            <table class="am-table am-table-striped am-table-hover table-main">
                                <thead>
                                <tr>
                                    <th class="am-text-center">ID</th>
                                    <th class="am-text-center">登录IP</th>
                                    <th class="am-text-center">登录地址</th>
                                    <th class="am-text-center">登录客户端</th>
                                    <th class="am-text-center">登录时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template v-for="(item,index) in list.data">
                                    <tr>
                                        <td class="am-text-middle am-text-center">@{{ index+1 }}</td>
                                        <td class="am-text-middle am-text-center">@{{ item.ip }}</td>
                                        <td class="am-text-middle am-text-center">@{{ item.address }}</td>
                                        <td class="am-text-middle am-text-center">@{{ item.client | client }}</td>
                                        <td class="am-text-middle am-text-center">@{{ item.create_time }}</td>
                                    </tr>
                                </template>
                                </tbody>
                            </table>
                            <div class="am-cf">
                                <div class="am-fl am-margin">共 {{ $data->total() }} 条记录</div>
                                <div class="am-fr">
                                    {{ $data->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var vm = new Vue({
            el:'.lyl-content', //挂载点：主体页面
            data:{
                list:{!! $data->toJson() !!},
            },
            filters:{
                client:function(val){
                    switch(val){
                        case '0': return "移动端";break;
                        case '1': return "PC端";break;
                        default : return val;
                    }
                }
            },
            methods: {

            }
        })
    </script>
@endsection